<template>
    <div>
      <!-- 卡片视图区 -->
      <el-card>
        <h1 style="font-size: 30px; margin-top: -1px;" align="center">宿舍管理系统</h1>
        <!-- 走马灯区域 -->
        <el-carousel :interval="4000" type="card" height="250px">
          <el-carousel-item v-for="item in imageBox">
                  <el-image :src="item.path" style="width: 100%;height: 100%;"></el-image>
          </el-carousel-item>
        </el-carousel>
        <span>前端所用技术：Vue.js、ElementUI、Axios</span>
        <el-divider></el-divider>
        <span>后端所用技术：SSM框架、Maven、Restful架构风格</span>
        <el-divider></el-divider>
        <span>数据库：Mysql5.7版本</span>
      </el-card>
    </div>
</template>

<script>
    export default {
       data() {
         return {
            //轮播图片
           imageBox: [
             {
               id: 0,
               path: 'https://www.hniu.cn/img/subbn1.jpg'
             },
             {
               id: 1,
               path: 'https://www.hniu.cn/img/subbn2.jpg'
             },
             {
               id: 2,
               path: 'https://www.hniu.cn/img/subbn3.jpg'
             },
             {
               id: 3,
               path: 'https://www.hniu.cn/PIC/MDM.JPG'
             },
             {
               id: 4,
               path: 'https://www.hniu.cn/PIC/QIUC.JPG'
             },
           ]
         }

       },


    }
</script>

<style scoped lang="less">
  .el-carousel{
    margin-bottom: 20px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
